<template>
	<view class="orderDetails" v-if="order_msg">
		<view class="bgBox d_flex">
			<view class="icon">
				<text v-if="order_msg.pintuan_state == '10'" class="custom-icon custom-icon-dengdai"></text>
				<text v-else-if="(order_msg.pintuan_state == '11' || order_msg.order_type == '10') && order_msg.order_state == '11'" class="custom-icon custom-icon-daifahuo"></text>
				<text v-else-if="order_msg.order_state == '12'" class="custom-icon custom-icon-daishouhuofuben"></text>
				<text v-else-if="order_msg.pintuan_state == '12'" class="custom-icon custom-icon-tishishibai"></text>
				<text v-else class="custom-icon custom-icon-wancheng"></text>
			</view>
			<view class="con">
				<view v-if="order_msg.pintuan_state == '10'" class="title">拼团中</view>
				<view v-else-if="(order_msg.pintuan_state == '11' || order_msg.order_type == '10') && order_msg.order_state == '11'" class="title">待发货</view>
				<view v-else-if="order_msg.order_state == '12'" class="title">待收货</view>
				<view v-else-if="order_msg.pintuan_state == '12'" class="title">未拼中</view>
				<view v-else class="title">已收货</view>
			</view>
		</view>
		
		<view class="address flex_conter mTop2">
			<view class="iconBox flex_conter_c"><u-icon class="icon" name="map-fill"></u-icon></view>
			<view class="content">
				<view class="text">
					<text class="uname">{{order_msg.receiver_name}}</text>
					<text class="phone">{{order_msg.receiver_phone}}</text>
				</view>
				<view class="addressInfo u-line-2">{{order_msg.address_province}} {{order_msg.address_city}} {{order_msg.address_unit}} {{order_msg.address_detail}}</view>
			</view>
		</view>
		
		<view class="address flex_space_b" @click="logistics" v-if="order_msg.express_order_no && show_express_position">
			<view class="iconBox flex_conter_c"><u-icon class="icon" name="map-fill"></u-icon></view>
			<view class="content">
				<view class="text">{{last_express_position}}</view>
				<view class="time">{{last_express_time}}</view>
			</view>
			<u-icon name="arrow-right" color="#999" size="24"></u-icon>
		</view>
		
		<view class="address flex_conter" v-if="order_msg.express_order_no && !show_express_position">
			<view class="iconBox flex_conter_c"><u-icon class="icon" custom-prefix="custom-icon" name="wuliu"></u-icon></view>
			<view class="content">
				<view class="text">
					<text class="uname">快递公司：{{order_msg.express_company}}</text>
				</view>
				<view class="addressInfo u-line-2" @click="copyExpressOrderNo">快递单号：{{order_msg.express_order_no}}</view>
			</view>
		</view>
		
		<view class="commodity mTop2">
			<view class="commodityBox">
				<u-image width="180rpx" height="180rpx" :src="order_msg.goods_main_img" border-radius="7"></u-image>
				<view class="info">
					<view class="title u-line-2">{{order_msg.goods_title}}</view>
					<view class="sort">[<block v-for="(item,index) in order_msg.choose_spec_list" :key="index"><block v-if="index > 0">,</block>{{item.name}}:{{item.val}}</block>]</view>
					<view class="num flex_space">
						<view class="price"><text>￥</text>{{order_msg.goods_price}}</view>
						<view class="pieces"><text>x</text>{{order_msg.goods_num}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="infoBox mTop2">
			<view class="item" @click="copyOrderNo">订单编号：{{order_msg.order_no}}</view>
			<view class="item">下单时间：{{order_msg.order_time}}</view>
		</view>
		
		<view class="orderInfo mTop2">
			<view class="item flex_space_b">
				<view class="left">商品金额</view>
				<view class="right">
					<text class="redText">￥{{order_msg.goods_price}}</text>
				</view>
			</view>
			<view class="item flex_space_b">
				<view class="left">运费</view>
				<view class="right">
					<text>包邮</text>
					<!-- <text class="redText">￥10</text> -->
				</view>
			</view>
			<view class="item flex_space_b" v-if="order_msg.use_score > 0">
				<view class="left">积分抵扣</view>
				<view class="right">
					<text v-if="order_msg.use_score == 0">无积分</text>
					<text class="redText" v-else>-￥{{order_msg.use_score}}</text>
				</view>
			</view>
		</view>
		
		<view class="bottomBox" v-if="order_msg.order_state == '12'">
			<button type="primary" class="btn" hover-class="none" @click="receiveGoods">确认收货</button>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	import md5 from '../../common/md5.js';
	export default {
		data() {
			return {
				order_no:"",
				order_msg:null,
				last_express_position:"快递查询中...",
				last_express_time:"",
				comCode:"",
				show_express_position:true,
				position_json:{},
				express_100_key:"",
				express_100_customer:""
			}
		},
		onLoad(options) {
			this.order_no = options.order_no;
			this.loadData();
		},
		methods: {
			loadData: function(){
				// 加载数据
				var that = this;
				util.requestPost("api.php/user/orderDetail", {order_no:this.order_no}, function(res) {
					that.order_msg = res.data.order_msg;
					that.express_100_key = res.data.express_100_key;
					that.express_100_customer = res.data.express_100_customer;
					if(that.order_msg.express_order_no){
						if(that.express_100_key && that.express_100_customer){
							that.queryExpressInfo();
						}else{
							that.show_express_position = false;
						}
					}
				},true);
			},
			queryExpressInfo(){
				let that = this;
				// 智能识别快递公司编码
				uni.request({
					url:`https://www.kuaidi100.com/autonumber/auto?num=${this.order_msg.express_order_no}&key=${this.express_100_key}`,
					method:"GET",
					success: (res) => {
						if(res.data.length>0 && res.data[0].comCode){
							that.comCode = res.data[0].comCode;
							that.queryLastExpressInfo();
						}else{
							that.show_express_position = false;
						}
					},
					fail: (err) => {
						console.log(err)
					}
				});
			},
			queryLastExpressInfo(){
				// 查询最近一次快递更新信息
				let that = this;
				// 智能识别快递公司编码
				let param = {
						"com":that.comCode,
						"num":that.order_msg.express_order_no,
						"form":"",
						"phone":"",
						"to":"",
						"resultv2": "0",
						"show": "0",
						"order": "desc"
					};
					
				let data = {
					customer:this.express_100_customer,
					param:JSON.stringify(param)
				};
				data.sign = md5(JSON.stringify(param)+that.express_100_key+data.customer).toUpperCase();
				
				uni.request({
					url:"https://poll.kuaidi100.com/poll/query.do",
					method:"POST",
					data:data,
					header:{
							'Content-Type': 'application/x-www-form-urlencoded',
						  },
					success: (res) => {
						if(res.data.message == 'ok'){
							let position = res.data.data;
							that.position_json = JSON.stringify(position);
							if(position.length > 0){
								that.last_express_position = position[0].context;
								that.last_express_time = position[0].time;
							}else{
								that.last_express_position = '快递揽货中！';
							}
						}else{
							that.show_express_position = false;
						}
					},
					fail: (err) => {
						this.show_express_position = false;
						console.log(err);
					}
				});
				
			},
			copyOrderNo(){
				uni.setClipboardData({
					data:this.order_msg.order_no,
					success() {
						util.toast("复制成功！");
					}
				})
			},
			copyExpressOrderNo(){
				uni.setClipboardData({
					data:this.order_msg.express_order_no,
					success() {
						util.toast("复制成功！");
					}
				})
			},
			// 确认收货
			receiveGoods(){
				let that = this;
				uni.showModal({
				  title: '确认已经收到货物？',
				  success (res) {
					if (res.confirm) {
						util.requestPost("api.php/user/receiveGoods", {order_no:that.order_no}, function(res) {
							const pages = getCurrentPages(); //获取页面栈
							const beforePage = pages[pages.length - 2]; //前一个页面
							beforePage.$vm.updateOrderState();   //前一个页面方法
							util.toast("操作成功！");
							setTimeout(function(){
								uni.navigateBack();
							}, 1000);
						});
					}
				  }
				});
			},
			logistics () {
				uni.navigateTo({
					url: `/pagesB/my/logistics?order_no=${this.order_no}&express_no=${this.order_msg.express_order_no}&express_company=${this.order_msg.express_company}&position_json=${this.position_json}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.orderDetails {
	min-height: 100%;
	background-color: var(--bgColor);
	padding-bottom: 120rpx;
}
.bgBox {
	padding: 50rpx;
	background: var(--primaryColor);
	color: #FFFFFF;
	.icon .custom-icon {
		font-size: 40rpx;
	}
	.con {
		margin-left: 20rpx;
	}
	.title {
		font-size: 32rpx;
	}
}

.address {
	padding: 28rpx 32rpx;
	background-color: #FFFFFF;
	border-top: 1rpx solid #EEEEEE;
	.iconBox {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: var(--primaryColor);
		.icon {
			color: #FFFFFF;
			font-size: 40rpx;
		}
	}
	.content {
		flex: 1;
		padding: 0 20rpx 0;
		.addressInfo {
			font-size: 28rpx;
			color: #333;
		}
		.text {
			margin-bottom: 10rpx;
			.uname {
				font-size: 28rpx;
				color: #333333;
				margin-right: 10rpx;
			}
			.phone {
				font-size: 24rpx;
				color: #999;
			}
		}
		.time {
			font-size: 24rpx;
			color: #999999;
		}
	}
}

.commodity {
	background-color: #FFFFFF;
	.merchant {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
		.merchantName {
			margin-left: 10rpx;
			font-size:28rpx;
			font-weight:bold;
		}
	}
	.commodityBox {
		display: flex;
		padding: 30rpx;
		.info {
			flex: 1;
			margin-left: 22rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title {
				font-size:28rpx;
				font-weight: 600;
				color: #333333;
			}
			.price {
				color: var(--primaryColor);
				font-size: 28rpx;
				font-weight: 600;
				text {
					font-size: 24rpx;
				}
			}
			.num {
				.pieces {
					font-size: 28rpx;
					color: #666666;
					text {
						font-size: 24rpx;
					}
				}
			}
		}
	}
}
.infoBox {
	padding: 30rpx;
	background-color: #FFFFFF;
	.item {
		margin-bottom: 20rpx;
		&:last-of-type {
			margin-bottom: 0;
		}
	}
}

.orderInfo {
	padding: 30rpx;
	background-color: #FFFFFF;
}
.orderInfo .item {
	margin-bottom: 20rpx;
}
.orderInfo .item:last-of-type {
	margin-bottom: 0;
}
.orderInfo .item .right {
	color: #999999;
}

.bottomBox {
	height: 100rpx;
	background-color: #FFFFFF;
	padding: 0 32rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.bottomBox .btn {
	width:220rpx;
	height: 68rpx;
	line-height: 68rpx;
	font-size: 28rpx;
	background: var(--primaryColor);
	border-radius:40rpx;
	color: #FFFFFF;
	margin: 0 0 0 20rpx;
}
.bottomBox .btn:nth-of-type(1) {
	color: #666666;
	border: 1rpx solid #666666;
	background: transparent;
}
</style>
